<template>
    <div>
        <el-form :model="params">
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-form-item label="供应商编码">
                        <el-input placeholder="请输入编码" v-model="params.supplierCode" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="7">
                    <el-form-item label="供应商名称">
                        <el-input placeholder="请输入名称" v-model="params.supplierName" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="供应商简称">
                        <el-input placeholder="请输入名称" v-model="params.supplierAbbreviation" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-form-item label="是否启用">
                        <el-select v-model="params.status" placeholder="请选择">
                            <el-option label="是" value="0"></el-option>
                            <el-option label="否" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                <el-button type="primary" @click="paramsReset" :icon="Refresh">重置</el-button>
            </el-row>

            <el-button style="background-color:#ADD8E6" @click="Insert" :icon="Plus">新增</el-button>
            <el-button style=" background-color: #90EE90" :icon="Edit">修改</el-button>
            <el-button style="background-color: #FFCCCB" @click="Delete1" plain :disabled="deleteDisabled"
                :icon="Delete">删除</el-button>

            <div style="display: flex; flex-direction: column; gap: 10px;">
                <el-table style="width: 100%" :data="salesorder" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" :selectable="selectable" width="40" />
                    <el-table-column prop="supplierCode" label="供应商编码" width="150"></el-table-column>
                    <el-table-column prop="supplierName" label="供应商名称" width="150"></el-table-column>
                    <el-table-column prop="supplierAbbreviation" label="供应商简称称" width="150"></el-table-column>
                    <el-table-column prop="supplierGrade" label="供应商等级" width="150" v-slot="options">
                        <el-tag :type="options.row.supplierGrade == '0' ? 'warning' : 'info'">
                            {{ options.row.supplierGrade == '0' ? 'A级' : 'B级' }}
                        </el-tag>
                    </el-table-column>
                    <el-table-column prop="supplierScore" label="供应商评分" width="150"></el-table-column>
                    <el-table-column prop="supplierPhone" label="供应商电话" width="150"></el-table-column>
                    <el-table-column prop="status" label="是否启用" width="180" v-slot="options">
                        <el-tag :type="options.row.status == '0' ? 'success' : 'danger'">
                            {{ options.row.status == '0' ? '是' : '否' }}
                        </el-tag>
                    </el-table-column>
                    <el-table-column label="操作" width="300px">
                        <template #default="scope">
                            <el-button :row="scope.row" type="primary" link @click="Update(scope.$index, scope.row)"
                                :icon="Edit">修改</el-button>
                            <el-button type="primary" link @click="Delete2(scope.row)" :icon="Delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24">
                        <div class="demo-pagination-block">
                            <el-pagination :current-page="params.currentPage" :page-size="params.pageSize" background
                                :default-page-size="params.pageSize" :page-sizes="pageSizes"
                                layout="total,sizes,prev,pager,next,jumper" :total="pageResult.total"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>

        </el-form>


        <!-- 弹窗 -->
        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" width="70%" @close="handleClose">
            <el-form :model="formData" ref="form" label-width="80px" :inline="false">
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="供应商编码" label-width="100px">
                            <el-input v-model="formData.supplierCode" placeholder="请输入供应商编码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商名称" label-width="100px">
                            <el-input v-model="formData.supplierName" placeholder="请输入供应商名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商简称" label-width="100px">
                            <el-input v-model="formData.supplierAbbreviation" placeholder="请输入供应商简称"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="供应商电话" label-width="100px">
                            <el-input v-model="formData.supplierPhone" placeholder="请输入供应商电话" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商等级" label-width="100px">
                            <el-select v-model="formData.supplierGrade" placeholder="请选择供应商等级" clearable>
                                <el-option label="A级" value="0"></el-option>
                                <el-option label="B级" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商评分" label-width="100px">
                            <el-input v-model="formData.supplierScore" placeholder="请输入评分" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="供应商简介" label-width="100px">
                            <el-input type="textarea" v-model="formData.supplierIntroduction"
                                placeholder="请输入供应商简介"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="供应商地址" label-width="100px">
                            <el-input type="textarea" v-model="formData.supplierAddress"
                                placeholder="请输入供应商地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="官网地址" label-width="100px">
                            <el-input v-model="formData.officialAddress" placeholder="请输入供应商官网地址" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="邮箱地址" label-width="100px">
                            <el-input v-model="formData.emailAddress" placeholder="请输入供应商邮箱地址" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="启用状态" label-width="100px">
                            <el-radio-group v-model="formData.status">
                                <el-radio value="0">是</el-radio>
                                <el-radio value="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input v-model="formData.remark" :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder="请输入备注" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button type="primary" @click="close">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>



</template>

<script setup>
import { ref, onMounted } from 'vue';
import { findSupplier, insertsupplier, updatesupplier, deletespplier } from '@/apis/xms/index';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh, Delete, Plus, Edit } from '@element-plus/icons-vue';
let title = ref("");
let visible = ref(false);
const pageResult = ref({ total: 0 }); // 初始值包含 total 属性
let salesorder = ref([]); // 表格数据
const formData = ref({
    supplierCode: '',
    supplierName: '',
    supplierAbbreviation: '',
    supplierGrade: '',
    supplierScore: '',
    supplierPhone: '',
    supplierIntroduction: '',
    supplierAddress: '',
    officialAddress: '',
    emailAddress: '',
    remark: '',
    status: '0'
});
// 弹窗表单数据

let ids = ref([]) // 选中行的id数组

const deleteDisabled = ref(true) // 删除按钮禁用状态,默认禁用

// 分页大小
const pageSizes = [2, 5, 8, 10];

const params = ref({
    currentPage: 1,
    pageSize: 5,
    customerCode: '',
    customerAbbreviation: '',
    customerName: '',
    customerEnglishName: '',
    status: ''
});

// 搜索条件
const handleSearch = async () => {
    pageResult.value = await findSupplier(params.value)
    salesorder.value = pageResult.value.records
}
//处理分页大小
const handleSizeChange = async (size) => {
    params.value.pageSize = size
    pageResult.value = await findSupplier(params.value)
    salesorder.value = pageResult.value.records
}

//处理当前分页数据
const handleCurrentChange = async (currentPage) => {
    params.value.currentPage = currentPage
    pageResult.value = await findSupplier(params.value)
    salesorder.value = pageResult.value.records
}

//查询数据
onMounted(async () => {
    pageResult.value = await findSupplier(params.value)
    console.log(pageResult.value)
    salesorder.value = pageResult.value.records
})


/**
 * 新增单位弹窗显示层
 * @param index 
 * @param row 
 */
const Insert = () => {
    visible.value = true;
    title.value = "新增供应商";
}

/**
 * 修改单位弹窗显示层
 * @param index 
 * @param row 
 */
const Update = (index, row) => {
    console.log(row)
    visible.value = true;
    title.value = "修改供应商";
    formData.value = { ...row }; // 直接使用 row 的数据  
}


/**
 * 添加修改表单数据提交
 */
const onSubmit = async () => {
    if (title.value == "新增供应商") {
        await insertsupplier(formData.value)
    } else {
        await updatesupplier(formData.value)

    }
    visible.value = false
    ElMessage.success(`${title.value}成功`)
    handleSearch();

}


const handleSelectionChange = (val) => {
    deleteDisabled.value = !val.length
    ids.value = val.map(item => item.supplierId) // 使用map方法过滤出选中行的logId数组
}



//批量删除
const Delete1 = async (index, row) => {
    ElMessageBox.confirm(`是否确认删除访问编号为${ids.value.join(',')}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 调用删除API  
        await deletespplier(ids.value);  // 将单个ID传递给 deletesspplier 方法
        console.log(`删除的ID:`, ids.value);
        pageResult.value = await findSupplier(params.value);
        salesorder.value = pageResult.value.records;
        ids.value = [] // 重置选中行的id数组
        ElMessage({ type: 'success', message: '删除成功' });
        handleSearch();  // 重新查询数据  
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' });
    });
};


//行内删除
const Delete2 = async (row) => {
    ElMessageBox.confirm(`是否确认删除访问编号为${row.supplierId}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 调用删除API  
        await deletespplier([row.supplierId]);  // 将单个ID传递给 deletesspplier 方法

        console.log(`删除的ID:`, row.supplierId);

        // 从表格数据中移除当前行
        salesorder.value = salesorder.value.filter(item => item.supplierId !== row.supplierId);

        ElMessage({ type: 'success', message: '删除成功' });
        handleSearch();  // 重新查询数据  
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' });
    });
};



/**
 * 自定义删除选中行的处理方法
 * @param row 行数据
 */
const selectable = (row) => {
    // 表示所有行数据都可以被选中，可以自定义选择逻辑
    return true
}


/**
 * 关闭弹窗,处理数据
 */
const handleClose = () => {
    resetData()
}
/**
 * 重置数据
 */
function resetData() {
    formData.value = {}
    title.value = ''
}



let close = () => {
    visible.value = false;
    loadData();
};

/**
 * 加载数据
 */
const loadData = async () => {
    await handleSearch();
};

/**
 * 重置搜索参数
 */
const paramsReset = () => {
    params.value = {
        materialName: '',
        status: null
    }
    handleSearch();

}

</script>

<style scoped>
.demo-pagination-block {
    display: flex;
    /* 使其成为 flexbox 容器 */
    justify-content: flex-end;
    /* 将内容对齐到右侧 */
    margin-top: 20px;
}

.form-item .el-form-item__content {
    line-height: 1.8;
    /* 或者你可以使用像素值，例如: 30px */
}
</style>
